<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .logo {
            }

            .detail {
                width: 200px;
                padding-left: 25px;
            }

            .command {
                padding-left: 25px;
            }

            ul.ui-datalist-data {
                padding-inline-start: 0px;
            }
        </style>
    </ui:define>

    <ui:define name="title">
        DataList - <span class="subitem">MultiViewState</span>
    </ui:define>

    <ui:define name="description">
        MultiViewState feature enables DataList to maintain its state across pages by setting multiViewState attribute to true. In this demo, manipulate use pagination, then visit another page and then come back to this page. DataList state should remain as you've left it.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datalist" />

    <ui:define name="implementation">

        <h:form id="form">
            <p:messages id="messages" />

            <p:commandButton value="Clear multiViewSate" action="#{dataListView.clearMultiViewState}" update="@form"/>

            <br/><br/>

            <p:dataList value="#{dataListView.cars3}" var="car" id="carList" type="unordered" itemType="none" multiViewState="true" style="width:400px"
                        paginator="true" rows="5" pageLinks="5"
                        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
                <h:panelGrid columns="3" columnClasses="logo,detail,command">
                    <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" />

                    <p:outputPanel>
                        <h:panelGrid columns="2" cellpadding="5">
                            <h:outputText value="Id:" />
                            <h:outputText value="#{car.id}" style="font-weight: bold"/>

                            <h:outputText value="Year:" />
                            <h:outputText value="#{car.year}" style="font-weight: bold"/>

                            <h:outputText value="Color:" />
                            <h:outputText value="#{car.color}" style="font-weight: bold"/>
                        </h:panelGrid>
                    </p:outputPanel>

                    <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                        <h:outputText styleClass="ui-icon pi pi-search" style="margin:0 auto;" />
                        <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
                    </p:commandLink>
                </h:panelGrid>
            </p:dataList>

            <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
                <p:outputPanel id="carDetail" style="text-align:center;">
                    <p:panelGrid  columns="2" rendered="#{not empty dataListView.selectedCar}" columnClasses="label,value">
                        <f:facet name="header">
                            <p:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/>
                        </f:facet>

                        <h:outputText value="Id:" />
                        <h:outputText value="#{dataListView.selectedCar.id}" />

                        <h:outputText value="Year" />
                        <h:outputText value="#{dataListView.selectedCar.year}" />

                        <h:outputText value="Color:" />
                        <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                        <h:outputText value="Price" />
                        <h:outputText value="$#{dataListView.selectedCar.price}" />
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>
        </h:form>

    </ui:define>

</ui:composition>